<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
    <style>
        .wai{
            width: 400px;
            height: 400px;
            border:solid 1px #aaa;
            display:flex;
            justify-content:center;
            align-items:center;
            margin: 50px auto;
            position:relative;
        }
        .nei{
            width: 100px;
            height: 100px;
            position:absolute;
            left: 0;
            top: 0;
            border:solid 1px #123;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component {
            render(){
                return <div className="wai" 
                        onClick={this.change} 
                        ref={el => this.wai = el} 
                        onMouseMove={this.mousemove}>  
                        
                        <div className="nei" onClick={this.click} ref={el => this.nei = el}>
                            <a href="http://atguigu.com" onClick={this.link}>尚硅谷</a>
                        </div>
                    </div>
            }

            link = (e) => {
                alert('你点击了这个链接');
                //3. 阻止事件的默认行为  prevent 阻止 预防 default 默认 
                e.preventDefault();
                e.stopPropagation();
            }

            click = (e) => {
                //1. 获取事件的事件源
                e.target.style.background = '#45a';
                console.log(111);
                //2. 阻止事件冒泡
                e.stopPropagation();
            }

            change = (e) => {
                e.target.style.background = '#a68';
                console.log(222);
            }

            mousemove = (e) => {
                //获取鼠标距离左侧的偏移量  clientX  clientY
                let x = e.pageX;
                let y = e.pageY;
                //获取外层 div 距离左侧的偏移量 这里不能使用 e.target , 因为内部元素会跟着走
                let waiLeft = this.wai.offsetLeft; // offsetLeft 获取相对于父级元素左侧的偏移量
                let waiTop = this.wai.offsetTop;
                //获取内层元素宽度的一般  offsetWidth 获取元素本身的宽度
                let w = this.nei.offsetWidth / 2;
                let h = this.nei.offsetHeight / 2;
                //计算最终的 left
                let newLeft = x - waiLeft - w;
                let newTop = y - waiTop - h;
                //判断 left
                if(newLeft <= 0) newLeft = 0;
                if(newTop <= 0) newTop = 0;
                //计算最大的 left 值
                let maxLeft = this.wai.offsetWidth - this.nei.offsetWidth
                if(newLeft >= maxLeft) newLeft = maxLeft;
                let maxTop = this.wai.offsetHeight - this.nei.offsetHeight;
                if(newTop >= maxTop) newTop = maxTop;
                //为内层元素设置left样式
                this.nei.style.left = newLeft + 'px';
                this.nei.style.top = newTop + 'px';
            }
        }

        ReactDOM.render(<App />, document.querySelector('#root'));

        //右键菜单事件
        window.oncontextmenu = function(e){
            //不显示右键菜单
            e.preventDefault();
        }
    </script>
</body>
</html>